<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mark{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: rgb(0, 0, 0,.5);
  }
  .text{
    width: 200px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 100px;
    background-color: tomato;
  }
</style>
<body> 
  <!-- 父 -->
  <div id="app">
    <h4 v-show="filterList.length >0">
      我的兴趣爱好是:
      <span v-for="(item,index) in filterList"   >
       -- {{ item.title }} 
      </span>
    </h4>
    <button @click="isShow">点击</button>
    <my-dialog 
    v-show="flag"
    @send="changeFlag"
    ></my-dialog>
  </div>

  <!-- 子  弹框--> 
  <template id="dialog">
    <div class="mark">
        <div class="text">
          <ul>
            <!-- 计算属性 过滤得到 选中的数据 -->
            <li v-for="(item, index) in list" >
              {{item.title}}
              <input type="checkbox"  v-model="item.check">
            </li>
          </ul>
          <button @click="cancel">取消</button>
          <button @click="success">确定</button>

        </div>
    </div>
  </template>

  <script>
    //子组件
    const Dialog ={
      template:'#dialog',
      
      methods: {
        //取消 传给父元素的取消
        cancel(){
          this.$emit("send",{
           flag: false
          })
        },
        //确定
        success(){
          this.$emit("send",{
            flag:false,
            // 深拷贝
            list:JSON.parse(JSON.stringify(this.list))
          })
          
        }
      },
      data() {
        return {
          list:[
            {
              title:'篮球',
              check:false
            },
            {
              title:'足球',
              check:false
            },
            {
              title:'羽毛球',
              check:false
            }

          ]
        }
      },
    }
    // 父组件
    new Vue({
      el:'#app',
      //计算属性
      computed:{
          filterList(){
            return this.list.filter(item => item.check)
          }
      },
      data() {
        return {
          flag:false,
          //在 父 中 定义一个空数组 接受 changeFlag 传过来的值
          list:[]
        }
      },
      
      components:{
        "my-dialog":Dialog
      },
      methods: {
        isShow(){
          this.flag =! this.flag
        },
        //取消
        changeFlag({flag , list}){
          // console.log(obj);
          this.flag = flag
          //点击了确定
          if (list) {
            this.list =list
            console.log('点击了确定');
          }
          
        }
      },
    })
  </script>
</body>
</html>